<template>
  <el-container>
    <el-header v-if="detailStatus" >
      <el-form ref="queryData" :model="queryData" inline size="mini" style="height: 30px;">
        <el-form-item prop="merchantName">
          <el-input v-model="queryData.merchantName" placeholder="商户名称" style="width: 120px;" />
        </el-form-item><el-form-item prop="merchantCode">
          <el-input v-model="queryData.merchantCode" placeholder="商户号" style="width: 120px;" />
        </el-form-item>

        <el-form-item prop="code">
          <el-input v-model="queryData.code" placeholder="劵编号" style="width: 120px;" />
        </el-form-item>
        <el-form-item prop="name">
          <el-input v-model="queryData.name" placeholder="劵名称" style="width: 120px;" />
        </el-form-item>
        <el-form-item>
          <span>发劵场景：</span>
          <el-select v-model="queryData.couponObj" placeholder="请选择">
            <el-option
              v-for="item in couponObjOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <span>优惠劵类型：</span>
          <el-select v-model="queryData.type" placeholder="请选择">
            <el-option
              v-for="item in couponTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <span>优惠劵状态：</span>
          <el-select v-model="queryData.status" placeholder="请选择">
            <el-option
              v-for="item in couponStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <span>创建时间：</span>
          <el-date-picker
            v-model="createTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          />
        </el-form-item>

        <el-form-item>
          <span>生效时间：</span>
          <el-date-picker
            v-model="startTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          />
        </el-form-item>

        <el-form-item>
          <span>结束时间：</span>
          <el-date-picker
            v-model="endTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain icon="el-icon-search" size="mini" @click="queryPageList">查询</el-button>
          <el-button type="info" icon="el-icon-refresh" size="mini" @click="reset('queryData')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main v-if="detailStatus" style="margin-top:100px">
      <el-table :data="pageTableData" border size="small" max-height="700">
        <el-table-column v-if="show" label="id" prop="id" header-align="center" align="center" width="65" />
        <el-table-column label="商户名称" prop="merchantName" header-align="center" align="center" width="120" />
        <el-table-column label="优惠劵编号" prop="code" header-align="center" align="center" width="120" />
        <el-table-column label="优惠劵名称" prop="name" header-align="center" align="center" width="80" />


        <!--隐藏列-->
        <el-table-column v-if="show" label="满金额(分)" prop="ruleFull" header-align="center" align="center" width="80" />
        <el-table-column v-if="show" label="减金额(分)" prop="ruleSubtract" header-align="center" align="center" width="80" />
        <el-table-column v-if="show" label="每人每天最多可使用" prop="useCountMax" header-align="center" align="center" width="80" />
        <el-table-column v-if="show" label="失效天数" prop="failDay" header-align="center" align="center" width="80" />


        <el-table-column v-if="show" label="新会员注册" prop="sendSceneNew" header-align="center" align="center" width="80" >
         <template slot-scope="scope">
　　　　　　　　<span v-if="scope.row.sendSceneNew=== 0">否</span>
　　　　　　　　<span v-if="scope.row.sendSceneNew=== 1">是</span>
          </template>
          </el-table-column>
        <el-table-column v-if="show" label="充值后" prop="sendSceneRecharge" header-align="center" align="center" width="80" >
        <template slot-scope="scope">
　　　　　　　　<span v-if="scope.row.sendSceneRecharge=== 0">否</span>
　　　　　　　　<span v-if="scope.row.sendSceneRecharge=== 1">是</span>
          </template>
          </el-table-column>
        <el-table-column v-if="show" label="消费后" prop="sendSceneResume" header-align="center" align="center" width="80" >
        <template slot-scope="scope">
　　　　　　　　<span v-if="scope.row.sendSceneResume=== 0">否</span>
　　　　　　　　<span v-if="scope.row.sendSceneResume=== 1">是</span>
          </template>
        </el-table-column>

        <el-table-column label="优惠劵类型" prop="type" header-align="center" align="center" width="120">
          <template slot-scope="scope">
            　　　　　　　　<span v-if="scope.row.type=== 1">满减券</span>
            　　　　　　　　<span v-if="scope.row.type=== 2">定额有门槛</span>
            <span v-if="scope.row.type=== 3">定额无门槛</span>
          　　　　　　</template>
        </el-table-column>
        <el-table-column label="开始时间" prop="startTime" header-align="center" align="center" width="160" />
        <el-table-column label="结束时间" prop="endTime" header-align="center" align="center" width="160" />
        <el-table-column label="创建时间" prop="createTime" header-align="center" align="center" width="160" />
        <el-table-column label="优惠劵数量" prop="couponCount" header-align="center" align="center" width="120" />
        <el-table-column label="发放数量" prop="issuedCount" header-align="center" align="center" width="120" />
        <el-table-column label="核销数量" prop="verifyCount" header-align="center" align="center" width="120" />
        <el-table-column label="状态" prop="status" header-align="center" align="center" width="65">
          <template slot-scope="scope">
            　　　　　　　　<span v-if="scope.row.status=== 0">未生效</span>
            　　　　　　　　<span v-if="scope.row.status=== 1">已生效</span>
          　　　　　　</template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" header-align="center" align="center" min-width="200">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="queryCard(scope.row)"
            >查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer v-if="detailStatus" style="text-align: right">
      <el-pagination
        :current-page="queryData.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryData.totalCount"
        @size-change="pageSizeChange"
        @current-change="pageCurrentChange"
      />
    </el-footer>
    <div v-if="!detailStatus">
      <span>活动信息</span>
       <el-form :model="couponForm" style="margin-top:10px;background-color:rgb(231, 231, 231)">
        <el-form-item label="优惠劵名称" :label-width="formLabelWidth">
          <el-input :disabled="formDisabled"  v-model="couponForm.name" placeholder="" style="width:160px;" />
          <!-- <el-select :disabled="formDisabled" v-model="couponForm.name" placeholder="请选择">
              <el-option
                v-for="item in couponObjOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select> -->
        </el-form-item>
        <el-form-item label="劵类型" :label-width="formLabelWidth">
          <el-select :disabled="formDisabled" v-model="couponForm.type" style="width:160px;" placeholder="请选择">
              <el-option
                v-for="item in couponTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item  label="优惠规则" :label-width="formLabelWidth">
          <span>会员消费满</span>
          <el-input :disabled="formDisabled"  v-model="couponForm.ruleFull" placeholder="" style="width:160px;" />
          <span>元，</span>
          <span>减</span>
          <el-input :disabled="formDisabled"  v-model="couponForm.ruleSubtract" placeholder="" style="width:160px;" />
          <span>元</span>
        </el-form-item>
        <el-form-item label="劵使用限制" :label-width="formLabelWidth">
          <el-select :disabled="formDisabled"  v-model="couponForm.couponLimit" style="width:160px;" placeholder="请选择">
              <el-option
                v-for="item in couponLimitOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="劵失效时间" :label-width="formLabelWidth">
          <span>自领取之后</span>
          <el-input :disabled="formDisabled"  v-model="couponForm.failDay" placeholder="" style="width:160px;" />
          <span>天失效</span>
        </el-form-item>
        <el-form-item label="发券数量" :label-width="formLabelWidth">
          <el-input :disabled="formDisabled"  v-model="couponForm.issuedCount" placeholder="" style="width:160px;" />
        </el-form-item>
        <el-form-item label="有效时间" :label-width="formLabelWidth">
          <!-- <el-input v-if="editType!==0&&editType!==1" :disabled="formDisabled"  v-model="couponForm.startTime" placeholder="" style="width: 120px;" /> -->
          <el-date-picker 
            style="width:200px;"
            v-if="editType===0||editType===1"
            :disabled="formDisabled"
            v-model="couponForm.startTime"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
          <span>至</span>
          <!-- <el-input v-if="editType!==0&&editType!==1" :disabled="formDisabled"  v-model="couponForm.endTime" placeholder="" style="width: 120px;" /> -->
           <el-date-picker 
           style="width:200px;"
            v-if="editType===0||editType===1"
            :disabled="formDisabled"
            v-model="couponForm.endTime"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="劵领用限制" :label-width="formLabelWidth">
          <span>每人每天可发放</span>
          <el-input :disabled="formDisabled"  v-model="couponForm.getCountMax" placeholder="" style="width:160px;" />
          <span>张</span>
          <span>每人每天最多使用</span>
          <el-input :disabled="formDisabled"  v-model="couponForm.useCountMax" placeholder="" style="width:160px;" />
          <span>张</span>
        </el-form-item>
        <el-form-item label="发劵场景" :label-width="formLabelWidth">
          <el-radio v-model="couponForm.sendSceneNew" @click.native.prevent="sendSceneNewClick(1)" :label="1">新会员注册</el-radio>
          <el-radio v-model="couponForm.sendSceneRecharge" @click.native.prevent="sendSceneRechargeClick(1)" :label="1">会员充值后</el-radio>
          <el-radio v-model="couponForm.sendSceneResume" @click.native.prevent="sendSceneResumeClick(1)" :label="1">会员卡消费后</el-radio>
        </el-form-item>
      </el-form>
      <span>操作记录</span>
      <div style="margin-top:10px;background-color:rgb(231, 231, 231)">
        <el-table :data="editData" border size="small" max-height="700">
          <el-table-column label="创建时间" prop="user" header-align="center" align="center" width="120" />
          <el-table-column label="创建人" prop="editTime" header-align="center" align="center" width="200" />
          <el-table-column label="操作内容" prop="content" header-align="center" align="center" width="120" />
        </el-table>
      </div>
      <el-button type="primary" @click="returnCouponList">返回优惠劵列表</el-button>
      <!-- <div v-if="editType==1">
        <el-row >
        <span>操作记录</span>
        <el-row :gutter="20">
          <el-col :span="8">
            <span>创建时间：</span>
            <span>{{couponForm.createTime}}</span>
          </el-col>
          <el-col :span="8">
            <span>创建人：</span>
            <span>{{couponForm.couponCode}}</span>
          </el-col>
          <el-col :span="8">
            <span>操作类型：</span>
            <span v-if="couponForm.type===1">满减券</span>
            <span v-if="couponForm.type===2">定额有门槛</span>
            <span v-if="couponForm.type===3">定额无门槛</span>
          </el-col>
        </el-row>
      </el-row>
      </div> -->
    </div> 
    <!-- <el-dialog title="优惠劵" :visible.sync="couponEditVisible">
      <el-form :model="couponForm">
        <el-form-item label="优惠劵名称" :label-width="formLabelWidth">
          <el-input :disabled="formDisabled"  v-model="couponForm.name" placeholder="" style="width: 120px;" />
          <el-select :disabled="formDisabled" v-model="couponForm.name" placeholder="请选择"> -->
              <!-- <el-option
                v-for="item in couponObjOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select> -->
        <!-- </el-form-item>
        <el-form-item label="劵类型" :label-width="formLabelWidth">
          <el-select :disabled="formDisabled" v-model="couponForm.type" placeholder="请选择">
              <el-option
                v-for="item in couponTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item  label="优惠规则" :label-width="formLabelWidth">
          <span>会员消费满</span>
          <el-input :disabled="formDisabled"  v-model="couponForm.ruleFull" placeholder="" style="width: 120px;" />
          <span>元，</span>
          <span>减</span>
          <el-input :disabled="formDisabled"  v-model="couponForm.ruleSubtract" placeholder="" style="width: 120px;" />
          <span>元</span>
        </el-form-item>
        <el-form-item label="劵使用限制" :label-width="formLabelWidth">
          <el-select :disabled="formDisabled"  v-model="couponForm.couponLimit" placeholder="请选择">
              <el-option
                v-for="item in couponLimitOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="劵失效时间" :label-width="formLabelWidth">
          <span>自领取之后</span>
          <el-input :disabled="formDisabled"  v-model="couponForm.failDay" placeholder="" style="width: 120px;" />
          <span>天失效</span>
        </el-form-item>
        <el-form-item label="发券数量" :label-width="formLabelWidth">
          <el-input :disabled="formDisabled"  v-model="couponForm.issuedCount" placeholder="" style="width: 120px;" />
        </el-form-item>
        <el-form-item label="有效时间" :label-width="formLabelWidth"> -->
          <!-- <el-input v-if="editType!==0&&editType!==1" :disabled="formDisabled"  v-model="couponForm.startTime" placeholder="" style="width: 120px;" /> -->
          <!-- <el-date-picker 
            v-if="editType===0||editType===1"
            :disabled="formDisabled"
            v-model="couponForm.startTime"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
          <span>至</span> -->
          <!-- <el-input v-if="editType!==0&&editType!==1" :disabled="formDisabled"  v-model="couponForm.endTime" placeholder="" style="width: 120px;" /> -->
           <!-- <el-date-picker 
            v-if="editType===0||editType===1"
            :disabled="formDisabled"
            v-model="couponForm.endTime"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="劵领用限制" :label-width="formLabelWidth">
          <span>每人每天可发放</span>
          <el-input :disabled="formDisabled"  v-model="couponForm.getCountMax" placeholder="" style="width: 120px;" />
          <span>张</span>
          <span>每人每天最多使用</span>
          <el-input :disabled="formDisabled"  v-model="couponForm.useCountMax" placeholder="" style="width: 120px;" />
          <span>张</span>
        </el-form-item>
        <el-form-item label="发劵场景" :label-width="formLabelWidth">
          <el-radio v-model="couponForm.sendSceneNew" @click.native.prevent="sendSceneNewClick(1)" :label="1">新会员注册</el-radio>
          <el-radio v-model="couponForm.sendSceneRecharge" @click.native.prevent="sendSceneRechargeClick(1)" :label="1">会员充值后</el-radio>
          <el-radio v-model="couponForm.sendSceneResume" @click.native.prevent="sendSceneResumeClick(1)" :label="1">会员卡消费后</el-radio>
        </el-form-item>
      </el-form>
      <div v-if="editType==1">
        <el-row >
        <span>操作记录</span>
        <el-row :gutter="20">
          <el-col :span="8">
            <span>创建时间：</span>
            <span>{{couponForm.createTime}}</span>
          </el-col>
          <el-col :span="8">
            <span>创建人：</span>
            <span>{{couponForm.couponCode}}</span>
          </el-col>
          <el-col :span="8">
            <span>操作类型：</span>
            <span v-if="couponForm.type===1">满减券</span>
            <span v-if="couponForm.type===2">定额有门槛</span>
            <span v-if="couponForm.type===3">定额无门槛</span>
          </el-col>
        </el-row>
      </el-row>
      </div>
      
      <div v-if="editType==0" slot="footer" class="dialog-footer">
        <el-button type="primary" @click="couponSave">保存</el-button>
        <el-button @click="couponEditVisible = false">取消</el-button>
      </div>
    </el-dialog> -->
  </el-container>
</template>

<script>
import { memberAjax } from 'Ajax'
export default {
  name: 'MemberCoupon',
  data() {
    return {
      show:false,
      detailStatus: true,
      editType:0,
      formDisabled: true,
      couponEditVisible: false,
      formLabelWidth: '120px',
      show: false,
      couponForm:{
        id: 0,
        name:'',
        type: 1,
        couponLimit:1,
        sendSceneNew:1,
        sendSceneRecharge:0,
        sendSceneResume:1,
        failDay: 3,
        ruleFull: 10000,
        ruleSubtract: 100,
        issuedCount: 3000,
        startTime: '2021-04-22 01:03:00',
        endTime: '2021-04-22 01:03:00',
        getCountMax: 3000,
        useCountMax: 2
      },
      couponDetail:{
        couponCode:'',
        name:'',
        type:1,
        startTime:'',
        endTime:'',
        createTime:'',
        couponCount:1234,
        issuedCount:567,
        verifyCount:12345,
        status:0,
      },
      editData:[
        {
          user: '商户1',
          editTime: '2021-04-25 11:36:30',
          content: '修改状态',
        },
        {
          user: '商户1',
          editTime: '2021-04-26 23:36:30',
          content: '修改状态',
        }
      ],
      pageTableData: [
      ],
      queryData: {
        activityId: '', // 活动编号
        name: '', // 优惠劵名称
        couponObj: '',
        type: '',
        status: '',
        // value: '0',
        createTimeStart: '',
        createTimeEnd: '',
        endTimeStart: '',
        endTimeEnd: '',
        startTimeStart: '',
        startTimeEnd: '',
        pageNum: 1,
        pageSize: 10,
        totalCount: 0
      },
      couponLimitOptions:[
        {
          value: 1,
          label: '不与其他规则同时使用'
        }
      ],
      couponObjOptions: [
        {
          value: 1,
          label: '新会员'
        },
        {
          value: 2,
          label: '老会员'
        },
        {
          value: 3,
          label: '全部会员'
        }
      ],
      couponTypeOptions: [
        {
          value: 1,
          label: '满减券'
        },
        {
          value: 2,
          label: '定额有门槛'
        },
        {
          value: 3,
          label: '定额无门槛'
        }
      ],
      couponStatusOptions: [
        {
          value: 0,
          label: '未生效'
        },
        {
          value: 1,
          label: '已生效'
        }
      ],
      createTime: '',
      startTime: '',
      endTime: ''

    }
  },
  methods: {
    returnCouponList(){
      this.detailStatus = true
    },
    sendSceneNewClick(e){
      e === this.couponForm.sendSceneNew ? this.couponForm.sendSceneNew = '' : this.couponForm.sendSceneNew = e
    },
    sendSceneRechargeClick(e){
      e === this.couponForm.sendSceneRecharge ? this.couponForm.sendSceneRecharge = '' : this.couponForm.sendSceneRecharge = e
    },
    sendSceneResumeClick(e){
      e === this.couponForm.sendSceneResume ? this.couponForm.sendSceneResume = '' : this.couponForm.sendSceneResume = e
    },
    addCoupon(){
      this.editType = 0
      this.couponEditVisible = true
      this.formDisabled = false
      this.couponForm.name = ''
      this.couponForm.type = ''
      this.couponForm.ruleFull = ''
      this.couponForm.ruleSubtract = ''
      this.couponForm.couponLimit = ''
      this.couponForm.failDay = ''
      this.couponForm.startTime = ''
      this.couponForm.endTime = ''
      this.couponForm.getCountMax = ''
      this.couponForm.useCountMax = ''
      this.couponForm.sendSceneNew = 0
      this.couponForm.sendSceneRecharge = 0
      this.couponForm.sendSceneResume = 0
      delete this.couponForm.id
    },
    queryCard(row) {
      this.editType = 1
      this.detailStatus= false
      this.formDisabled = true
      memberAjax.couponDetailList({id:row.id}).then(res => {
        this.couponForm = res
      })

    },
    couponSave(){
      memberAjax.couponSave(this.couponForm).then(res => {
        this.couponEditVisible = false
      })
    },
    editCard(row) {
      this.editType = 0
      this.couponEditVisible = true
      this.formDisabled = false
      // this.couponForm.id = row.id
      this.couponForm = row
    },
    deleteCard(scope,rows) {
       memberAjax.couponDelete({id:scope.row.id}).then(res => {
         rows.splice(scope.$index, 1);
      })
    },
    pageSizeChange(val) {
      this.queryData.pageSize = val
      this.queryPageList()
    },
    pageCurrentChange(val) {
      this.queryData.pageNum = val
      this.queryPageList()
    },
    queryPageList() {
     if (this.createTime && this.createTime.length>0) {
        this.queryData.createTimeStart = this.createTime[0].toLocaleString()
        this.queryData.createTimeEnd = this.createTime[1].toLocaleString()
      }else{
        this.queryData.createTimeStart = ''
        this.queryData.createTimeEnd = ''
      }

      if (this.startTime && this.startTime.length>0) {
        this.queryData.startTimeStart = this.startTime[0].toLocaleString()
        this.queryData.startTimeEnd = this.startTime[1].toLocaleString()
      }else{
        this.queryData.startTimeStart = ''
        this.queryData.startTimeEnd = ''
      }

      if (this.endTime && this.endTime.length>0) {
        this.queryData.endTimeStart = this.endTime[0].toLocaleString()
        this.queryData.endTimeEnd = this.endTime[1].toLocaleString()
      }else{
        this.queryData.endTimeStart = ''
        this.queryData.endTimeEnd = ''
      }
      memberAjax.couponList(this.queryData).then(res => {
        this.pageTableData = res.list
      })

    },
    reset(formName) {
      this.$refs[formName].resetFields();
      this.queryData.status = ''
      this.queryData.type = ''
      this.queryData.couponObj = ''
      this.queryData.createTimeStart = ''
      this.queryData.createTimeEnd = ''
      this.queryData.startTimeStart = ''
      this.queryData.startTimeEnd = ''
      this.queryData.endTimeStart = ''
      this.queryData.endTimeEnd = ''
      this.createTime=[]
      this.startTime=[]
      this.endTime=[]
    }
  }
}
</script>

<style scoped>
.detail{
  padding-left: 20px;
}
.el-row{
  padding-top: 10px;
}
</style>
